@react-md/app-bar

@react-md/app-bar

This package is used to create a top-level fixed app bar in your application to display some sort of navigation button like a hamburger menu, your app title and/or logo, as well as any top-level actions for your app. You can also use this component to create toolbars or other header elements for different sections of your app.

Installation

npm install --save @react-md/app-bar

It is generally recommended to also install the following packages since they work hand-in-hand with this package:

npm install --save @react-md/theme \
  @react-md/typography \
  @react-md/button \
  @react-md/icon

Documentation

You should check out the full documentation for live examples and more customization information, but an example usage is shown below.

Usage

The primary use of this package is to create a fixed header that includes your app's logo, title, mobile navigation, or common actions. Here's a quick example:

import { render } from "react-dom";
import {
  AppBar,
  AppBarTitle,
  AppBarNav,
  AppBarAction,
  APP_BAR_OFFSET_CLASSNAME,
} from "@react-md/app-bar";
import { MenuSVGIcon, SearchSVGIcon } from "@react-md/material-icons";

const App = () => {
  const mobile = window.innerWidth < 600;

  return (
    <>
      <AppBar id="main-app-bar" fixed>
        {mobile && (
          <AppBarNav id="main-mobile-navigation" aria-label="Mobile navigation">
            <MenuSVGIcon />
          </AppBarNav>
        )}
        {<AppBarTitle keyline={!mobile}>My Company's Name</AppBarTitle>}
        <AppBarAction id="search" aria-label="Search">
          <SearchSVGIcon />
        </AppBarAction>
      </AppBar>
      <main className={APP_BAR_OFFSET_CLASSNAME}>
        <h3>Hello, world!</h3>
      </main>
    </>
  );
};

render(<App />, document.getElementById("root"));